<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/shop" replace>商户管理</el-breadcrumb-item>
      <el-breadcrumb-item>商户营销管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">商户营销管理</div>
      <div class="searchBox">
        <el-form size="mini" inline>
          <div class="block">
            <el-form-item label="手机号码">
              <el-input v-model="mobile"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" circle @click="search"></el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="split"></div>
      <el-row>
        <el-col :span="16" :offset="4" style="border-top: 1px solid #333;">未分配营销人员客户详情</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="4">商户名称</el-col>
        <el-col :span="8">{{info.shopName}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="4">商户账户</el-col>
        <el-col :span="8">{{info.shopName}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="4">开户地址</el-col>
        <el-col :span="8">{{info.shopName}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="4">设定营销专员</el-col>
        <el-col :span="8">{{info.shopName}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="4">
          <el-form size="mini" inline>
            <el-form-item label="部门">
              <el-select v-model="info.department" placeholder="请选择">
                <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8">
          <el-form size="mini" inline>
            <el-form-item label="人员">
              <el-select v-model="info.BDName" placeholder="请选择">
                <el-option v-for="item in BDNameOptions" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16" :offset="4">
          <el-button size="mini" type="primary">录入</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        mobile: '',
        info: {
          department: ''
        },
        departmentOptions: [],
        BDNameOptions: []
      }
    },
    created () {
    },
    methods: {
      search () {
      }
    }
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .split {
    height: 20px;
  }

  .el-row {
    display: flex;

    .el-col {
      padding: 20px 0;
      text-align: center;
      border-bottom: 1px solid #333;
      border-left: 1px solid #333;

      .el-form-item {
        margin-bottom: 0;
      }

      &:last-child {
        border-right: 1px solid #333;
      }
    }
  }
</style>
